<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Panel</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <meta name="author" content="http://www.huayingsoft.com/" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=8,IE=9,IE=10" />
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store">

    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/from/bootstrap-datetimepicker.min.css">
    <link rel="stylesheet" href="../../css/from/bootstrap-select.css">
    <link rel="stylesheet" href="../../css/bootstrapEx.css">

    <script src="../../js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../js/from/global.js"></script>
    <script type="text/javascript" src="../../js/from/jquery.smart-form.js"></script>
    <script type="text/javascript" src="../../js/from/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="../../js/from/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../../js/from/bootstrap-select.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrapEx2.0.js"></script>
</head>
<body>
    <div class="container-fluid">
        <div id="panel1"></div>
        <div id="panel2"></div>
        <div id="panel3"></div>
        <div id="panel4"></div>
        <div id="panel5"></div>
    </div>
</body>
<script>
     $(document).ready(function () {
        InitPanel1();
        InitPanel2();
        InitPanel3();
        InitPanel4();
        InitPanel5();
     });

     function InitPanel1(){
        new bsEx.Panel({
            renderto:"#panel1",
            title:"普通面板 默认点击标题展开收起",
            body: '普通面板高度随内容增加'
        });
    }
     function InitPanel2(){
        new bsEx.Panel({
            renderto:"#panel2",
            title:"带按钮面板",
            body: '普通面板高度随内容增加,这个面板底部有按钮,<br/><br/>',
            btns:[{id:"btn_save_1",text:"保存",btntype:"primary"},{id:"btn_close",text:"取消"}]
        });
    }
    //按钮点击事件，t当前按钮实例，p当前panel实例
    function btn_save_1_onclick(t,p){
        bsEx.Alert("提示",p.title + ":" + t.text,2)
    }
     function InitPanel3(){
        new bsEx.Panel({
            renderto:"#panel3",
            title:"不带头部和底部的面板",
            showhead:false,
            showfooter:false,
            body: '普通面板高度随内容增加,<br/>这个面板没有头部和底部<br/><br/>',
            btns:[{id:"btn_save",text:"保存",btntype:"primary"},{id:"btn_close",text:"取消"}]
        });
    }
     function InitPanel4(){
        new bsEx.Panel({
            renderto:"#panel4",
            title:"固定高度和宽度的面板，注意按钮位置的属性",
            width:'600px',
            height:'500px',
            btnPosition: "title",
            body: '普通面板高度随内容增加,<br/><br/>',
            btns:[{id:"btn_save",text:"保存",btntype:"primary",sizetype:"xs"},{id:"btn_close",text:"取消",sizetype:"xs"}]
        });
    }
     function InitPanel5(){
        InitForm1();
        new bsEx.Panel({
            renderto:"#panel5",
            title:"面板插入表单 注意body属性",
            body: form1,
            btnsAlign:"right",
            btns:[{id:"btn_save",text:"保存",btntype:"primary"},{id:"btn_close",text:"取消"}]
        });
    }

    var form1,userdata=[],depdata=[] ;
    //绘制表单
    function InitForm1() {
        //清空
        form1 = new bsEx.ItemForm();
        form1.items = [
            { type: 'text', name: 'taskCode', title: '单号' },
            { type: 'datetime', name: 'taskMakedate', title: '制单日期' },
            { type: 'select', name: 'taskMakeuser', title: '制单人', select: { data: userdata, tree: false } },
            { type: 'select', name: 'taskMakedep', title: '制单部门', select: { data: depdata, tree: true } },
            { type: 'numbertxt', name: 'tasknub', title: '数量' },
            { type: 'floattxt', name: 'taskprice', title: '价格' },
            { type: 'textarea', name: 'taskfield1', title: '备注', oneline: true }
        ];//项
        form1.colunb = 4;//列数
    }
</script>
</html>